﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DatePicker Chart</title>
    <style type="text/css">
        body{background:#2C2C2C;margin:0px;top:0px;left:0px;font-family:Calibri,Microsoft Sans-Serif Serif,Tahoma;font-style:normal;font-weight:normal;font-size:12px;color:#171717;}
        .template{background:#E8E8E8;min-width:650px;width:90%;min-height:450px;height:auto;border:1px dotted #A4A2A2;margin-top:2%;padding-bottom:25px;}
        .template .title{color:#E04E06;font-size:16px;font-weight:bold;text-align:left;margin-top:2.5%;min-width:550px;width:95%}
        .template .sample{background:#FFFFFF;min-width:550px;width:95%;min-height:250px;border:1px dotted #A4A2A2;padding-bottom:25px;}
        .template .content{background:#FFFFFF;min-width:550px;width:95%;margin-top:2.5%;min-height:50px;border:1px dotted #A4A2A2;padding-bottom:25px;}
    </style>
    <link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../Styles/IndustrialDashboard.css" />
    <link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/shared/examples.css" />   
    <style type="text/css">
        body{background:#2C2C2C; top:0px; left:0px; margin:0px;}  
        .chartContainercss{margin-top:10px;margin-left:50px;}        	    
	    #mainContainer{width:600px;margin:0 auto;margin-top:10px;border:1px double #000;padding:3px;}
	    #calendarDiv,#calendarDiv2{	width:240px;height:240px;float:left;}
	    .clear{clear:both;}	      
    </style>  
    <script src="../Scripts/IndustrialDashboard.js" type="text/javascript"></script>
 	<script type="text/javascript" src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->
    <script type="text/javascript" src="http://www.extjs.com/deploy/dev/ext-all.js"></script>
    <script src="../Widgets/Chart/Scripts/Chart.js" type="text/javascript"></script>            
        
    <link href="dhtmlgoodies_calendar/dhtmlgoodies_calendar.css" rel="stylesheet" type="text/css" />	
    <script src="dhtmlgoodies_calendar/dhtmlgoodies_calendar.js" type="text/javascript"></script>   
</head>
<body>
    <center>
        <div class="template">
            <center>
                <div class="title">Industrial Dashboard and Ext.js Chart Example</div>
                <div class="sample">
                    <center>
                        <div style="margin-top:25px;">
                            <input id="pdp" type="text" value="2010/04/04" readonly name="theDate" onchange="refreshControl();"/>
                            <input type="button" style="width:120px;height:22px;" value="Change Date" onclick="displayCalendar(document.getElementById('pdp'),'yyyy/mm/dd',this)"/> <span style='font-size:9px'> Sample data is spotty: only April 3-5, 2010 </span>
                        </div>
                    </center>
                    <center>
                        <div id="chartContainer" class="chartContainercss"></div>
                    </center>
                </div>
                <div class="content" style='text-align:left;padding:20px'>
                <p> In this example, the javascript code needed to invoke the stored procedure <i>dbo.getChartData(Date)</i> is:  </p>
                <pre style='background-color:#E0E0F0'>
                
                    attachDomReadyEventHandler(function() {
                        var SQLParams = new SQLParameters();
                        SQLParams.add(<span style='color:red;'>'Date'</span>, 'DATETIME', '2010-04-04');
                        var options = { 'URL': '../DALService.svc/CallProcedure', 'Procedure': <span style='color:red '>'dbo.getChartData'</span> };
                        ch = new Chart(document.getElementById('chartContainer'), options);
                        ch.refreshData(SQLParams);
                    });
                </pre>
                </div>
            </center>
        </div>
    </center>
    <script language="javascript" type="text/javascript">
        var ch = null;
        attachDomReadyEventHandler(function () {
            //Create SQLParameters Object
            var SQLParams = new SQLParameters();
            //Add SQLParameters(Name, SQLType, Value);                
            SQLParams.add('Date', 'DATETIME', '2010-04-04');
            //Set Initial Options, using "GetFile" method.
            var options = { 'URL': '../DALService.svc/CallProcedure', 'Procedure': 'dbo.getChartData' };
            //Create an Instance of Chart
            ch = new Chart(document.getElementById('chartContainer'), options);
            //Refresh Widget
            ch.refreshData(SQLParams);


        });

        function refreshControl() {
            if (!ch) return;
            var SQLParams = new SQLParameters();
            SQLParams.add('Date', 'DATETIME', document.getElementById('pdp').value);
            ch.refreshData(SQLParams);
        }
        
    </script>
</body>
</html>
